{extend name="public/base" /}

{block name="title"}<title>个人明细查询</title>{/block}

{block name="pjax_container"}
<style>
    .col-sm-2{
        width: 23.666667%;
        height: 33px;
        line-height: 40px;
        padding-top: 15px;
    }
    .col-sm-7{
        padding-top: 15px;
    }
    tr>th,
    td {
        text-align: center;
    }

    .btn-group-xs>.btn,
    .btn-xs {
        padding: 5px;
        margin: 0 5px;
    }

    .content-header>.breadcrumb>li{
        color: #999;
    }
    .content-header>.breadcrumb>.active{
        color: #666;
    }
    .content-header{
        height: 51px;

    }
    .btn-primary{
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 8px 20px;
    }
    .box-primary{
        border-top-color: #ecf0f5 !important;
        border-top-width: 16px;

    }
    .btn-primary:hover{
        background-color: #1890FF;
        color: #fff;
        border: none;
        opacity: .9;
        border-radius: 6px !important;
    }
    .delete-one{
        background-color: ff4141 !important;
        margin-left: 15px;
        border-radius: 6px;
    }
    .sreachs{
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 15px;
    }

    .form-control{
        width: 90%;
        border-radius: 8px;
    }

    .timepicker{
        margin: 10px 5px !important;
    }
    .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
        border: 1px solid #d2d6de;
        border-radius: 6px;
        padding: 6px 12px;
        height: 34px;
    }
    .box-header.with-border {
        border-bottom: 0px solid #f4f4f4;
    }

        .modal-content {
        margin-top: 150px;
        width: 600px;
        height: 690px;

    }

    .modal-body {
        padding: 27px;
        width: 856px;
        height: 570px;
        display: flex;
    }

    .modal-right {
        flex: 1;
        border: 1px solid #eee;
        margin-left: 30px;
    }

    .modal-left {
        height: 100%;
    }

    .modal-right>h4 {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .form-control {
        border-radius: 6px;
    }

    .table-body {
        width: 540px;
        height: 462px;
        border-radius: 6px;
        background-color: #eee;
    }

    .table-left {
        margin-right: 2%;
        width: 49%;
        height: 100%;
        float: left;
        border: 1px solid #eee;
        background-color: #fff;
    }

    .table-right,
    .table-right2 {
        width: 49%;
        height: 100%;
        border: 1px solid #eee;
        float: left;
        padding-top: 10px;
        background-color: #fff;
    }




</style>

<section class="content-header">
    <ol class="breadcrumb">
        <li>积分管理</li>
        <li class="active">个人明细查询</li>
    </ol>
</section>

<section class="content">
    <div class="row" >
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <div class="pull-left">

                        <style>
                            label{
                                margin: 0 3px 0 10px !important;
                            }
                        </style>
                        <div class="" style="top:10px;    margin: 10px;">
                            <form id="form1" action="{:search_url(['date', 'department_id', 'name'])}" method="GET" pjax-search="" id="export_form">
                                <div class="input-group input-group-sm">
                                    <input type="hidden" name="page" value="1" />
                                    <div style="float: right;    display: flex;">

                                        <input autocomplete="off" type="text" style="display: inline-block;width:215px;margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 35px;border-radius: 6px;" name="date" class="" id="date" value="{:input('get.date','')}" placeholder="选择日期"/>
                                        <div class="xyqk_input">
                                            <input type="text" style="display: inline-block;width:215px;margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 35px;border-radius: 6px;" name="department_name" value="{:input('get.department_name','')}" class="department_name"  placeholder="选择部门" autocomplete="off" />
                                            <input type="hidden" name="department_id" class="department_id" value="{:input('get.department_id','')}" />
                                                <div class="delect_btn_an" style="right: 15px; top: 6px;"><i class="fa fa-remove"></i></div>
                                        </div>
                                        
                                        <input type="text" style="display: inline-block;width: 150px;margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 35px;border-radius: 6px;" name="name" class="" value="{:input('get.name','')}" placeholder="请输入姓名" />

                                        <div class="input-group-btn" style="display: inline-block;">
                                            <button type="submit" class="btn btn-default sreachs">
                                                <i class="fa fa-search"></i> 查询
                                            </button>
                                        </div>

                                        <div class="box-header with-border" style="margin-left:100px; padding: 0;">
                                            <div class="pull-right">
                                                <a href="javascript:xls_explode();"  class="btn btn-sm btn-primary"><i class="fa fa-cloud-upload"></i> 导出</a>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>月份</th>
                            <th>固定积分</th>
                            <th>奖扣任务</th>
                            <th>考勤得分</th>
                            <th>当月得分</th>
                            <th>A分总分</th>
                            <th>累计得分</th>
                        </tr>
                        {volist name="list2" id="v"}
                            <tr>
                                <td>{$v.job_number}</td>
                                <td><a href="{:url('integral/reward_libaray_item',['type'=>'rc','y_m'=>$v['year_month'],'user_id'=>$v.user_id])}">{$v.name}</a></td>
                                <td>{:date('Ym', $v['year_month'])}</td>
                                <td>{$v.integral_b_sum_fixed}</td>
                                <td>{$v.integral_b_sum_prize}</td>
                                <td>{$v.integral_b_sum_qt}</td>
                                <td>{$v.integral_b_sum_total}</td>
                                <td>{$v.integral_a_sum_total}</td>
                                <td>{$v.total}</td>
                            </tr>
                        {/volist}
                    </table>
                </div>
                <div class="box-footer clearfix">
                    {$list->render()}
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(function () {
        $(".select2").select2({language:"zh-CN"});
    })

    layui.use('laydate', function(){
        var nowtime = "{:date('Y-01-01 H:i:s',time())}";
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date'
            ,min: nowtime //0天前
            ,type:'month'
            // range:true
        });
    });

    function xls_explode() {
        window.location.href = "{:url('integral/reward_libaray')}?" + $('#form1').serialize()+'&export=1';
        return false;
    }
</script>


<!-- Modal 弹出层重写 单选  -->
<link rel="stylesheet" href="__STATIC__/global/an_tree_css/an_tree_css.css">
<!-- Modal 弹出层重写 部门单选  -->
<div class="modal fade" id="myModal_single" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width:543px;height: 635px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">部门选择</h4>
            </div>
            <div class="modal-body">
                <div class="modal-left" style="width:485px;">
                    <div class="modal-left-title" style="margin-bottom: 20px;">
                        <div class="input-group">
                            <input name="search_user_name" type="text" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <button class="btn btn-info search_btn" type="button"
                                    style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="input-group table-body" style="width: 485px">
                        <div class="table-left" style="width: 100%;">
                            <div class="an_tree search_hide">

                            </div>
                            <div class="search_show" style="display: flex;  flex-direction: column;padding: 20px 10px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
.a{
    flex-direction: row;
}
</style>
</div>
<!-- 部门弹窗操作 部门单选   -->
<script>
    $("input[name='department_name']").focus(function () {
        $('#myModal_single').modal('show');
        // double_max = $("input[name='double_max']").val();
        // now_item_name = $(this);//节点
        // now_item_id = $("input[name='last_check_user_id']");//节点
        // first_id = $("input[name='first_check_user_id']").val();//id值
        // user_type = 2;
    });
    $('body').on('focus','.department_type_check', function () {
        $('#myModal_single').modal('show');
        // now_item_name = $(this);
        // now_item_id = $(this).siblings(".things_type_check_id");//节点
    });
</script>
<!-- 树结构js操作 部门单选  -->
<script>
    $("#myModal_single .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    $("#myModal_single").on("click", ".an_tree_txt", function () {
        $('#myModal_single').modal('hide');
        $(".department_name").val($(this).html());
        $(".department_id").val($(this).attr("data_id"));
    });
    $("#myModal_single").on("click", ".search_btn", function () {
        var item = $("#myModal_single .an_tree_txt");
        var search_name = $("#myModal_single input[name='search_user_name']").val();
        $("#myModal_single .search_show").html("");
        if(search_name == ""){
            $("#myModal_single .search_hide").show();
            $("#myModal_single .search_show").removeClass("an_tree");
        }else{
            $("#myModal_single .search_hide").hide();
            $("#myModal_single .search_show").show();
            var content = "";
            for (let i = 0; i < item.length; i++) {
                var name = item.eq(i).html();
                if (name.indexOf(search_name) != -1) {
                    content += item.eq(i).prop("outerHTML");
                }
                console.log(name);
            }
            $("#myModal_single .search_show").append(content)
        }
        
    });
</script>
<!-- 递归填充目录 部门单选  -->
<script>
    var department = "";
    $.ajax({
        type: 'get',
        url: "{:url('base/base_department_page')}",
        dataType:"json",
        async: false,
        success: function (data) {
            // eventList = JSON.parse(data);
            department = data;
        }
    })
    var an_tree = ergodic(department)
    $("#myModal_single .an_tree").append(an_tree);
    function ergodic(data) {
        var content = '';
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }
</script>



{/block}
